<script setup>
import { ref, reactive } from 'vue'
// import config from '@/assets/js/config'
import { getEthList, updateEthList } from '@/assets/api/system'
// import { showLoading } from '@/assets/js/loading'
import { showMsg } from '@/assets/js/utils'
const ethList = ref([])
function getData() {
    // showLoading()
    getEthList().then((res) => {
        ethList.value = res.data
        ethList.value.sort(function (a, b) {
            return b.ip_addr.length - a.ip_addr.length
        })
        initForm(res.data[0])
    })
}
getData()

function onEthChange(name) {
    const activeData = ethList.value.find((item) => item.eth_name == name)
    initForm(activeData)
}
function initForm(activeData) {
    const { dns, eth_name, gateway, ip_addr, mask } = activeData
    form.dns = dns
    form.eth_name = eth_name
    form.gateway = gateway
    form.ip_addr = ip_addr
    form.mask = mask
}

const form = reactive({})
const formRef = ref(null)
const loading = ref(false)
// function resetAction() {}
function saveAction() {
    formRef.value.validate((valid, fields) => {
        if (valid) {
            loading.value = true
            updateEthList(form)
                .then(() => {
                    showMsg('保存成功')
                    loading.value = false
                })
                .catch(() => {
                    loading.value = false
                })
        } else {
            console.log('error submit!', fields)
        }
    })
}
</script>
<template>
    <div class="white-box d-flex-1">
        <el-form
            ref="formRef"
            :model="form"
            size="large"
            label-width="120px"
            class="mt-20"
        >
            <el-row :gutter="100">
                <el-col :span="12">
                    <el-form-item
                        label="网卡选择："
                        prop="eth_name"
                        :rules="[
                            {
                                required: true,
                                message: '请选择网卡',
                            },
                        ]"
                    >
                        <el-select
                            v-model="form.eth_name"
                            placeholder="请选择"
                            class="full"
                            @change="onEthChange"
                        >
                            <el-option
                                :disabled="item.eth_name.indexOf('veth') == 0"
                                v-for="(item, index) in ethList"
                                :key="index"
                                :label="item.eth_name"
                                :value="item.eth_name"
                            />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item
                        label="地址："
                        prop="ip_addr"
                        :rules="[
                            {
                                required: true,
                                message: '地址不能为空',
                            },
                        ]"
                    >
                        <el-input v-model="form.ip_addr" placeholder="请输入" />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item
                        label="掩码："
                        prop="mask"
                        :rules="[
                            {
                                required: true,
                                message: '掩码不能为空',
                            },
                        ]"
                    >
                        <el-input v-model="form.mask" placeholder="请输入" />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item
                        label="网关："
                        prop="gateway"
                        :rules="[
                            {
                                required: true,
                                message: '网关不能为空',
                            },
                        ]"
                    >
                        <el-input v-model="form.gateway" placeholder="请输入" />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item
                        label="DNS："
                        prop="dns"
                        :rules="[
                            {
                                required: true,
                                message: 'DNS不能为空',
                            },
                        ]"
                    >
                        <el-input v-model="form.dns" placeholder="请输入" />
                    </el-form-item>
                </el-col>
                <!-- <el-col :span="12">
                    <el-form-item label="静态/动态地址：">
                        <el-input v-model="form.address" placeholder="请输入" />
                    </el-form-item>
                </el-col> -->
                <el-col :span="24" class="text-right" style="margin-top: 100px">
                    <!-- <el-button type="default" @click="resetAction">
                        重置
                    </el-button> -->
                    <el-button
                        :loading="loading"
                        type="primary"
                        @click="saveAction"
                    >
                        保存
                    </el-button>
                </el-col>
            </el-row>
        </el-form>
    </div>
</template>
